import React, { useState } from 'react'
import { getTicketApi } from '../api/user'
import { useLoaderData, useNavigate } from 'react-router-dom'
import { Steps, NavBar, Selector } from 'antd-mobile'
import styles from '../css/Ticket.module.css'
import { Collapse } from 'antd-mobile'
import {
  PayCircleOutline,
} from 'antd-mobile-icons'
function Ticket() {
  let nav = useNavigate()
  const { Step } = Steps
  let loaderData = useLoaderData()
  let [info] = useState(loaderData.info)
  const options = [
    {
      label: '二等座￥97/有票',
      value: '1',
    },
    {
      label: '一等座￥110/有票',
      value: '2',
    },
    {
      label: '商务座￥326/20张',
      value: '3',
    },
  ]
  return (
    <div>
      <NavBar>04月11日 周二</NavBar>
      <div className={styles.top}>
        <span>{info.startTime}</span>
        <span>{info.endTime}</span>
      </div>
      <Steps current={1}>
        <Step title={info.trainNo} description='描述' />
        <Step title={info.trainNo} description='描述' />
      </Steps>
      <div className={styles.two}>
        <span>{info.startStation}</span>
        <span>{info.endStation}</span>
      </div>
      <div className={styles.selector}>
        <Selector
          columns={3}
          options={options}
          defaultValue={['1']}
          onChange={(arr, extend) => console.log(arr, extend.items)}
        />

      </div>
      <div className={styles.selector}>
        <Selector
          columns={3}
          options={options}
          defaultValue={['1']}
          onChange={(arr, extend) => console.log(arr, extend.items)}
        />

      </div>
      <div className={styles.step}>
        <Steps current={1}>
          <Step title={info.trainNo} description='描述' />
          <Step title={info.trainNo} description='描述' />
        </Steps>
      </div>
      <div>
        <Collapse defaultActiveKey={['1']}>
          <Collapse.Panel key='1' arrow={<PayCircleOutline onClick={()=>{
            nav('/order')
          }} style={{ color: '#FD5635', fontSize: '32px' }}/>} title={'￥' + info.businessSeat.price} style={{ color: '#FD5635', fontSize: '32px' }}>
            1
          </Collapse.Panel>
          <Collapse.Panel key='2' arrow={<PayCircleOutline  onClick={()=>{
            nav('/order')
          }} style={{ color: '#FD5635', fontSize: '32px' }}/>} title={'￥' + info.fsoftSeat.price} style={{ color: '#FD5635', fontSize: '32px' }}>
            2
          </Collapse.Panel>
          <Collapse.Panel key='3' arrow={<PayCircleOutline  onClick={()=>{
            nav('/order')
          }} style={{ color: '#FD5635', fontSize: '32px' }}/>} title={'￥' + info.ssoftSeat.price} style={{ color: '#FD5635', fontSize: '32px' }}>
            3
          </Collapse.Panel>
        </Collapse>
      </div>
    </div>
  )
}

export default Ticket

export const loader = async ({ request }) => {
  let url = new URL(request.url)
  let obj = { ...Object.fromEntries(url.searchParams) }
  console.log(obj);

  let { data: res } = await getTicketApi({
    id: obj.id,
    start: obj.start,
    end: obj.end,
  })
  console.log(res);
  return { info: res }
}